<template>
	<view>
		<view class="example-body">
			<view class="item">
				<view class="item-title">原密码</view>
				<input v-model="oldpassword" maxlength="16" :class="['uni-input', {activeipt:activeArr[0]}]" password type="text" @focus="onfocus(0)"/>
			</view>
			<view class="item">
				<view class="item-title">新密码</view>
				<input v-model="newpassword" maxlength="16" class="uni-input" :class="['uni-input', {activeipt:activeArr[1]}]" password type="text" @focus="onfocus(1)"/>
			</view>
			<view class="item">
				<view class="item-title">确认密码</view>
				<input v-model="confirmpassword" maxlength="16" class="uni-input" :class="['uni-input', {activeipt:activeArr[2]}]" password type="text" @focus="onfocus(2)"/>
			</view>
		</view>
		<view class="note">
			密码必须是6-16位大、小写字母和数字组成
		</view>
		<view class="submit">
			<button type="primary" size="mini" @click="submit">保存</button>
		</view>
	</view>
</template>

<script>
	var md5 = require('../../common/md5.js');
	export default {
		data() {
			return {
				activeArr:[false,false,false],
				oldpassword:'',
				newpassword:'',
				confirmpassword:''
			}
		},
		methods: {
			onfocus(val){
				this.activeArr=[false,false,false]
				this.activeArr[val]=true
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
			blurPsd(){
				let reg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/;
				if (!reg.test(this.newpassword)) {
					uni.showToast({ title: '密码输入有误！', icon:"none" })
				}
			},
			async submit(){
				let reg = /^(?=.*[a-zA-Z])(?=.*\d).{6,16}$/;
				if (!reg.test(this.oldpassword)) {
					uni.showToast({ title: '原密码输入有误！', icon:"none" })
					return
				}
				if (!reg.test(this.newpassword)) {
					uni.showToast({ title: '新密码输入有误！', icon:"none" })
					return
				}
				if (this.newpassword!==this.confirmpassword) {
					uni.showToast({ title: '新旧密码输入不一致！', icon:"none" })
					return
				}
				let [err,res]=await this.$http.post("/updatePassword",{
					user: uni.getStorageSync('name'),
					oldpassword: md5.hex_md5(this.oldpassword),
					newpassword: md5.hex_md5(this.newpassword),
				})
				// 请求错误处理
				if (!this.$http.errorCheck(err,res)) return
				if(res.data==0){
					uni.showToast({ title: '旧密码输入有误！', icon:"none" })
				}else if(res.data==1){
					uni.showToast({ title: '密码修改成功！', icon:"success" })
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},1500)
				}else{
					uni.showToast({ title: '修改密码失败！', icon:"none" })
				}
			}
		}
	}
</script>

<style lang="less" scoped>
.uni-view{
	justify-content: center;
}
.item{
	display: flex;
	justify-content: center;
	margin-right: 40upx;
	.item-title{
		flex-basis: 150upx;
		display: flex;
		align-items: center;
		padding-left: 40upx;
		font-size: 35upx;
	}
	.uni-input{
		flex: 1;
	}
}
.uni-input {
	border-bottom: 1px solid #ececec;
}
.activeipt {
	border-bottom: 1px solid #26ca0d;
}
.note{
	font-size: 30upx;
	padding-left: 40upx;
	margin-top: 20upx;
	color: #999999;
}
.submit{
	display: flex;
	justify-content: center;
	margin-top: 20upx;
	uni-button[type=primary]{
		background-color: #26ca0d!important;
	}
}
</style>
